<template>
        <div class="main">
    <el-dialog
    :visible.sync="dialogVisible"
    width="30%"
    >
    <p style="width:100%;text-align:center;font-size:18px;font-weight:400;height:50px">安全验证</p>
    <el-form :model="findinfo"  ref="findinfo" >
      <p style="margin-left:6%">验证方式：邮箱</p>
    <el-form-item label="" prop="email" label-width="60px" >
      <el-input v-model="findinfo.email" style="width:100%;margin-left:-9%"></el-input>
    </el-form-item>
     <el-form-item label="" prop="code" label-width="60px" :rules="[{ required: true, message: '请输入验证码', trigger: 'blur' }]">
      <el-input v-model="findinfo.code" placeholder="请输入4位数验证码" style="width:60%;margin-left:-9%"></el-input>
       <el-button type="primary" @click="getCodeFun()" :value="codeTest" style="width:30%;margin-left:5%">{{codeTest}}</el-button>
    </el-form-item>
    
    <el-form-item>
    <el-button type="primary" @click="onSubmit2()" style="width:68%;margin-left:14%">确定</el-button>
    </el-form-item>


    </el-form>
    </el-dialog>

          <div class="regismain">
          <div class="regishead">
            <ul>
              <router-link to="/" target="_blank" >
              <li>返回首页</li>
              </router-link >
            </ul>
          </div>
          <div class="regisbody" v-if="keys===0">
            <h2 style="text-align:center;margin-bottom:30px">找回密码</h2>
            <el-form :model="findinfo"  ref="regisinfo" :rules="dataRule" >
             <el-form-item label="" prop="email" >
             <el-input v-model="findinfo.email" placeholder="请您输入邮箱" style="width:100%"></el-input>
             </el-form-item>
            <el-form-item>
             <el-button type="primary" @click="onSubmit()" style="width:100%;height:50;font-size:18px">下一步</el-button>
             </el-form-item>

            </el-form>
          </div>
          <div class="regisbody" v-if="keys===1">
            <h2 style="text-align:center;margin-bottom:30px">你要找回的账户是{{username}}</h2>
            <el-form :model="userinfo"  ref="userinfo" :rules="dataRule2" >
             <el-form-item label="" prop="password" >
             <el-input v-model="userinfo.password" type="password" placeholder="新密码" style="width:100%"></el-input>
             </el-form-item>
             <el-form-item label="" prop="entry" >
             <el-input v-model="userinfo.entry" type="password" placeholder="确认新密码" style="width:100%"></el-input>
             </el-form-item>
            <el-form-item>
             <el-button type="primary" @click="onSubmit3()" style="width:100%;height:50;font-size:18px">下一步</el-button>
             </el-form-item>

            </el-form>
          </div>
          </div> 
        </div>
</template>
<script>
import user from '@/api/user'
export default {
    layout: 'register',
    data() {
      return {
        visible: false,
        dialogVisible:false,
        findinfo:{
          email:'',
          code:''
        },
        userinfo:{
          password:'',
          entry:''
        },
         dataRule: {
          account: [
            { required: true, message: '请您输入用户名/邮箱/手机', trigger: 'blur' }
          ],
         },
         dataRule2: {
          password: [
            { required: true, message: '请您输入密码', trigger: 'blur' }
          ],
          entry: [
            { required: true, message: '请您输入确认密码', trigger: 'blur' }
          ]
         },
        second: 60,        //倒计时间
        codeTest: '获取验证码',
        disabled:false,
        keys:0,
        username:''
       }
      },
       methods: {
       
           regis(){
             alert("A")
           },
           checkCode(rule,value,callback){
            user.isexistcode(value,this.regisinfo.email)
              .then(response => {
              if(response.data.result===2){
                return callback(new Error('验证码错误'))
              }else{
                   return callback()
              }
              })
          },
          // 通过输邮箱号发送验证码
       getCodeFun(){
         if(this.disabled===false){
           user.sendfindCode(this.findinfo.email)
           .then(response => {
            if(response.data.result===0){
            this.disabled = true;
             this.timeDown()
             } else{
             this.$message({
                 type: 'false',
                 message: "你输入的邮箱不存在"
              })
         }
           })
          
         }
        
       },
      //  倒计时
       timeDown() {
        let result = setInterval(() => {
          --this.second;
          this.codeTest = this.second
          if (this.second < 1) {
            clearInterval(result);
            this.disabled = false;
            this.second = 60;
            this.codeTest = "获取验证码"
          }
        }, 1000);

      },
      onSubmit(){
        if(this.findinfo.email===''){
            this.$message({
                 type: 'false',
                 message: "请输入邮箱"
              })
        }else{
        this.dialogVisible = true
        }
  
       },
       onSubmit2(){
         console.log(this.findinfo.code)
         user.isexistcode(this.findinfo.email,this.findinfo.code)
        .then(response=>{
          console.log(response.data.result)
          if(response.data.result===2){
                 this.$message({
                 type: 'false',
                 message: "验证码错误"
              })
              }
             else{
                  user.getusername(this.findinfo.email)
                  .then(response =>{
                    this.username = response.data.username;
                    this.dialogVisible = false
                    this.keys=1
                  })

              }
         })
       },
        onSubmit3(){
            if(this.userinfo.entry===this.userinfo.password){
              user.updatepassword(this.findinfo.email,this.userinfo.password)
                .then(response =>{
                     window.location.href = '/'
                  })
             
            }else{
              console.log(this.userinfo.entry)
              console.log(this.userinfo.password)
                   this.$message({
                 type: 'false',
                 message: "您输入的密码与确认密码不一致"
              })
            }
       }
}
}
</script>

<style scoped>
.main{
  width:100;
}
>>>  .el-input__inner{
  height: 52px;
}
>>> .el-input{
   font-size:18px;
   height:70px;
 }
.regismain{
  width:68%;
  margin-left: 32%;
}
.regisbody{
  width:50%;
  height: auto;
  margin-left:25%;
  margin-top: 70px;
  }
.regishead{
  height: 20px;
  margin-left:80%;
  margin-top: 30px;
}
.regishead ul{
  list-style: none;
  font-size: 16px;
}
.regishead li{
  float: left;
  width: 120px;
  text-align: center;
}
</style>

